<template xmlns:v-bind="http://www.w3.org/1999/html">
  <div id="root" style="width: 100%">
    <div class="title">
      <div style="font-size: 150%; font-weight: bold; margin-bottom: 20px">
        图像列表
      </div>
      <div>患者姓名：{{ name }}</div>
    </div>
    <el-main style="padding-top: 50px; position: center">
      <el-table
        :data="tableData"
        border
        :default-sort="{ prop: 'date', order: 'descending' }"
      >
        <el-table-column prop="No" label="编号" min-width="20%" sortable>
        </el-table-column>
        <el-table-column prop="type" label="类别" min-width="20%" sortable>
        </el-table-column>
        <el-table-column prop="date" label="拍摄日期" min-width="40%" sortable>
        </el-table-column>
        <el-table-column prop="op" label="操作" min-width="20%">
          <template slot-scope="scope">
            <el-button ref="btn" @click="skip(scope.row.No)" size="small">
              {{role=='0'?'标注':'审核'}}
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-main>
  </div>
</template>
<style scoped>
.title {
  margin: 50px 0 0 700px;
}

.el-table {
  width: 70%;
  max-height: 500px;
  margin: 0 auto;
}
</style>
<script>
export default {
  data() {
    return {
      role: '0',
      name: this.$route.params.name,
      tableData: [
        {
          No: "1",
          type: '胃部病理图像',
          date: "2016-05-03",
        },
        {
          No: "2",
          type: '核磁共振图像',
          date: "2016-07-23",
        },
      ],
    };
  },
  methods: {
    skip(no) {
      this.$router.push({
        name: 'Fabric_test',
        params: {
          No: no,
        },
      });
    },
  },
  mounted() {
    console.log(sessionStorage.getItem('role'))
    this.role = sessionStorage.getItem('role')
    // if (sessionStorage.getItem("role") == "1") {
    //   this.role = "审核";
    // }
    // if (this.role=="1"){
    //   this.$refs.btn.$el.innerText = "审核";
    //   this.reload();
    // }
  }
};
</script>
